<template>
  <div>
    <canvas id="renderCanvas"></canvas>
  </div>
</template>

<script>
  import * as BABYLON from 'babylonjs';
  import 'babylonjs-loaders';

  export default {
    name: "home",
    data () {
      return {
        canvas: null,
        engine: null,
        scene: null,
      }
    },
    methods: {
      createScene(canvas, engine) {
        let scene = new BABYLON.Scene(engine);
        scene.background = '#fff'

        // Parameters: alpha, beta, radius, target position, scene, alpha(弧度)是纵向旋转，beta(弧度)是纬向旋转，半径是距离目标位置的距离
        let camera = new BABYLON.ArcRotateCamera('Camera', 0, Math.PI / 2, 30, new BABYLON.Vector3(0, 5, 0), scene);
        camera.attachControl(canvas, true); // 开启鼠标操作

        let light = new BABYLON.HemisphericLight('Light', new BABYLON.Vector3(0, 5, 0), scene); // 添加光照
        light.intensity = 5;

        BABYLON.SceneLoader.Append('/static/ship/', 'scene.gltf', scene);

        return scene
      }
    },
    created () {
      console.info('created');
    },
    mounted () {
      console.info('mounted')

      this.canvas = document.getElementById('renderCanvas');
      this.engine = new BABYLON.Engine(this.canvas, true);
      this.scene = this.createScene(this.canvas, this.engine);
      this.engine.runRenderLoop(() => {
        this.scene.render()
      })
    },
    updated () {
      console.info('updated')
    },
    destoryed () {
      console.info('destoryed')
    }
  }
</script>

<style scoped lang="less">
  #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }
</style>
